<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!-- 引入JSTL -->
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--
    <link rel="stylesheet"
        href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script
        src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    -->
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <link rel="stylesheet"
          href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="${APP_PATH }/static/js/jquery-3.3.1.min.js"></script>
    <script
            src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <title>部门列表</title>
</head>
<body>
<div class="container">
    <h1 class="page-header">部门管理</h1>
    <div class="row" id="title">
        <h3 class="page-header col-md-10">部门列表</h3>
        <button class="page-header col-sd-1 btn btn-info">
            <span class="glyphicon glyphicon-plus"></span> 新增
        </button>
        <button class="page-header col-sd-1 btn btn-danger">
            <span class="glyphicon glyphicon-trash"></span> 删除
        </button>
    </div>
    <div class="row" id="tablediv">
        <table class="table table-striped table-hover" id="departmentTable">
            <thead>
            <tr>
                <th class="col-md-1">#</th>
                <th class="col-md-7">部门名称</th>
                <th class="col-md-1">创建时间</th>
                <th class="col-md-1">更新时间</th>
                <th class="col-md-2">操作</th>
            </tr>
            </thead>
            <tbody id="tableBody">
            </tbody>
        </table>
    </div>
    <div class="row" id="page">
        <table class="table">
            <tr id="pageline">
                <td id="pageInformation" class="col-md-6"
                    style="vertical-align: middle;"></td>
                <td id="pageNavigator" class="col-md-6" align="right"></td>
            </tr>
        </table>
    </div>
</div>
<script>
    // 1. 页面加载完成后，直接发送 ajax 请求, 显示首页
    $(function() {
        goto_PageNum(1);
    });
    //*********************************************
    // 抽取页面切换的 ajax 请求方法，跳转到指定页码
    function goto_PageNum(pn) {
        $.ajax({
            url : "${APP_PATH}/departments",
            data : "pageNum=" + pn,
            type : "GET",
            success : function(result) {
                if(result.success){
                    //1. 解析并显示表格数据
                    buildDepartmentTable(result);
                    //2. 解析并显示分页信息
                    buildPageInfomation(result);
                    //3. 解析并显示分页导航条
                    buildPageNavigator(result);
                }else{
                    alert(result.message);
                }
            }
        });
    }
    // ****解析并显示表格数据****
    // console.log(result);
    /** Controller 传回的 json 字符串：result
     {"responseCode":100,"responseMessage":"处理成功！",
     "data":{
         "pageInfo":{"pageNum":1,"pageSize":3,"size":3,"startRow":1,"endRow":3,"total":7,"pages":3,
             "list":[
                 {"departmentId":1,"departmentName":"董事会","gmtCreate":1515600000000,"gmtModified":1515600000000,"employees":null},
                 {"departmentId":2,"departmentName":"总经办","gmtCreate":1515600000000,"gmtModified":1515600000000,"employees":null},
                 {"departmentId":3,"departmentName":"市场部","gmtCreate":1515600000000,"gmtModified":1515600000000,"employees":null}],
             "prePage":0,"nextPage":2,"isFirstPage":true,"isLastPage":false,
             "hasPreviousPage":false,"hasNextPage":true,
             "navigatePages":5,"navigatepageNums":[1,2,3],
             "navigateFirstPage":1,"navigateLastPage":3,"firstPage":1,"lastPage":3}}}
     */
    function buildDepartmentTable(result) {
        $("#tableBody").empty();
        var departments = result.data.list;
        $.each(departments, function(index, item) {
            //alert(index + " : " + item.departmentName);
            var departmentIdTd = $("<td></td>").addClass("col-md-1").append(
                item.departmentId);
            var departmentNameTd = $("<td></td>").addClass("col-md-7").append(
                item.departmentName);
            var gmtCreateTd = $("<td></td>").addClass("col-md-1").append(
                getLocalTime(item.gmtCreate));
            var gmtModifiedTd = $("<td></td>").addClass("col-md-1").append(
                getLocalTime(item.gmtModified));
            var editButton = $("<button></button>").addClass(
                "btn btn-primary btn-xs").append(
                $("<span></span>").addClass("glyphicon glyphicon-pencil")).append(
                " 编辑");
            var deleteButton = $("<button></button>").addClass(
                "btn btn-danger btn-xs").append(
                $("<span></span>").addClass("glyphicon glyphicon-trash")).append(
                " 删除");
            var operationTd = $("<td></td>").addClass("col-md-2")
                .append(editButton).append(" ").append(deleteButton);
            $("<tr></tr>").append(departmentIdTd).append(departmentNameTd).append(
                gmtCreateTd).append(gmtModifiedTd).append(operationTd).appendTo(
                "#tableBody");
            // 如果最后一页显示的条数不够一页，补充空行,单纯这么补貌似不够啊。。。。。
            var ps = result.data.pageSize;
            var s = result.data.size;
            if (s < ps) {
                for (var i = 0; i < (ps - s); i++) {
                    var emptyTR = $("<tr></tr>");
                    for (var j = 0; j < 5; j++) {
                        emptyTR.append($("<td></td>"));
                    }
                    emptyTR.appendTo("#tableBody");
                }
            }
        });
    }
    //******************************************
    // 页码信息文字
    function buildPageInfomation(result) {
        //当前 第 页，共 页，共有 条记录。
        $("#pageInformation").empty();
        $("#pageInformation").append(
            "当前 第 " + result.data.pageNum + " 页，共 "
            + result.data.pages + " 页，共有 "
            + result.data.total + " 条记录");
    }
    //******************************************
    /*
     <nav aria-label="Page navigation">
     <ul class="pagination">
     <li>
     <a href="#" >«
     </a>
     </li>
     <li><a href="#">1</a></li>
     <li>
     <a href="#" aria-label="Next">
     <span aria-hidden="true">»</span>
     </a>
     </li>
     </ul>
     </nav>
     */
    // 页码导航按钮
    function buildPageNavigator(result) {
        $("#pageNavigator").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        var ps = result.data.pageSize;
        var pn = result.data.pageNum;
        // 创建 首页 按钮 并加入到 <ul></ul> 中
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首 页"));
        ul.append(firstPageLi);
        // 创建 上一页 按钮 并加入到 <ul></ul> 中
        var previousPageLi = $("<li></li>").append($("<a></a>").append("上一页"));
        ul.append(previousPageLi);
        // 首页时 禁用 上一页 和 首页 按钮
        if (result.data.hasPreviousPage == false) {
            firstPageLi.addClass("disabled");
            previousPageLi.addClass("disabled");
        } else {
            firstPageLi.click(function() {
                goto_PageNum(1);
            });
            previousPageLi.click(function() {
                goto_PageNum(pn - 1);
            });

        }
        // 创建 数字页码 按钮（index 是索引，item 是显示的页码数字） 并加入到 <ul></ul> 中
        $.each(result.data.navigatepageNums, function(index, item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item));
            //高亮当前页码
            if (result.data.pageNum == item) {
                numLi.addClass("active");
            }
            ul.append(numLi);
            numLi.click(function() {
                goto_PageNum(item);
            });
        });
        // 创建 下一页 按钮 并加入到 <ul></ul> 中
        var nextPageLi = $("<li></li>").append($("<a></a>").append("下一页"));
        ul.append(nextPageLi);
        // 创建 末页 按钮 并加入到 <ul></ul> 中
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末 页"));
        ul.append(lastPageLi);
        // 末页时 禁用 下一页 和 末页 按钮
        if (result.data.hasNextPage == false) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        } else {
            nextPageLi.click(function() {
                goto_PageNum(pn + 1);
            });
            lastPageLi.click(function() {
                goto_PageNum(result.data.pages);
            });
        }
        // 把 <ul></ul> 加入 到 <nav></nav> 中，再加入到 表格
        //$("#pageNavigator").append($("<nav></nav>").append(ul));
        $("<nav></nav>").append(ul).appendTo($("#pageNavigator"));
    }

    function getLocalTime(nS) {
        return new Date(parseInt(nS)).toLocaleDateString();
    }
</script>
</body>
</html>
